<template>
  <div class="classDetail">
    <div class="center">
      <div class="info">
        <div class="font">
          <h2>{{trainer.name}}</h2>
          <p class="hide" id="show">{{trainer.introduce}}</p>
          <div @click="hide"></div>
        </div>
        <div class="img">
          <img :src="trainer.images || require('../../assets/images/default.png')" alt="">
        </div>
      </div>
      <div class="dress">
        <div class="price">
          <p>{{store.price}}</p>
        </div>
        <div class="time">
          <p><span></span>&nbsp;<span>{{weekday}} {{weekTime}}</span></p>
        </div>
        <div class="local">
          <p>{{store.address}}</p>
        </div>
      </div>
      <div class="intro">
        <section>课程简介</section>
        <div class="con">
          <article>
            {{course.description}}
          </article>
          <p class="class"><span>{{course.title}}</span></p>
          <div class="img">
            <v-touch v-on:swipeleft="swipeleft" v-on:swiperight="swiperight">
              <ul :style="{width: h}" class="ulBox">
                <li v-for="item in store.images"><img :src="item" alt=""></li>
              </ul>
            </v-touch>
          </div>
        </div>
      </div>
      <div class="ye">
        <div class="ye_tit">
          <div class="iconBox">
            <div class="icon_careful"></div>
          </div>
          <div>
            注意事项
          </div>
        </div>
        <div class="ye_content">
          <div style="margin-bottom: 10px;" v-for="(item, index) in store.notes">
           {{`${index}.${item}`}}
          </div>
        </div>
      </div>
      <div class="ye">
        <div class="ye_tit">
          <div class="iconBox">
            <div class="icon_idea"></div>
          </div>
          <div>
            健身步骤
          </div>
        </div>
        <div class="ye_mid"></div>
        <div class="ye_content step">
          <img src="../../assets/images/steps.png" style="height: 2.52rem; width: 2.40rem;">
        </div>
      </div>
    </div>
    <div class="null"></div>
    <div class="finish">
      <div class="left" @click="left">立即约课</div>
      <div class="right" @click="SHARE_OPEN = true">
        <!--{{ SHARE_OPEN }}-->
      分享
      </div>
    </div>
    <div v-show="SHARE_OPEN" @click="SHARE_OPEN = false;" class="_3_Zce">
      <img :src="require('@/assets/images/share_tip2.png')">
    </div>
  </div>

</template>

<script>
import {requestSchedulesDetail} from '@/api/api'
// import { baseUrl } from '../../api/config'
export default {
  name: 'classDetail',
  data () {
    return {
      SHARE_OPEN: false,
      h: '',
      intros: [
        {
          title: '训练效果',
          article: '我们生活在一个有着各种诱惑和刺激的世界，工作、感情、生活中，到处都是让我们分散注意力的事情。该找个方法让自己的心安静下来了。当你坐在瑜伽垫上，通过呼吸调息、动静平衡，将整个身心都集中起来的时候，你会变得更冷静，更轻松。瑜伽强调在放松和平静中达到身心合一的状态，在肢体的伸展和动作中，疲惫和压力渐渐消散，身体逐渐呈现最佳的状态。',
          hide: true
        },
        {
          title: '训练效果',
          article: '我们生活在一个有着各种诱惑和刺激的世界，工作、感情、生活中，到处都是让我们分散注意力的事情。该找个方法让自己的心安静下来了。当你坐在瑜伽垫上，通过呼吸调息、动静平衡，将整个身心都集中起来的时候，你会变得更冷静，更轻松。瑜伽强调在放松和平静中达到身心合一的状态，在肢体的伸展和动作中，疲惫和压力渐渐消散，身体逐渐呈现最佳的状态。',
          hide: true
        },
        {
          title: '训练效果',
          article: '我们生活在一个有着各种诱惑和刺激的世界，工作、感情、生活中，到处都是让我们分散注意力的事情。该找个方法让自己的心安静下来了。当你坐在瑜伽垫上，通过呼吸调息、动静平衡，将整个身心都集中起来的时候，你会变得更冷静，更轻松。瑜伽强调在放松和平静中达到身心合一的状态，在肢体的伸展和动作中，疲惫和压力渐渐消散，身体逐渐呈现最佳的状态。',
          hide: true
        }
      ],
      weekday: '',
      weekTime: '',
      trainer: {},
      store: {},
      course: {}
    }
  },
  mounted: function () {
    this.$nextTick(function () {
      this.getCourseDetail()
//      window.wx.ready(function () {
//        const shareobj = {
//          title: '3号空间',
//          desc: '3号空间',
//          link: baseUrl + '/classDetail',
//          success: function () {
//          }
//        }
//        window.wx.onMenuShareTimeline(shareobj)
//        window.wx.onMenuShareAppMessage(shareobj)
//        window.wx.onMenuShareQQ(shareobj)
//        window.wx.onMenuShareWeibo(shareobj)
//        window.wx.onMenuShareQZone(shareobj)
//      })
    })
  },
  methods: {
    hide: function () {
      const show = document.getElementById('show')
      show.classList.remove('hide')
      event.target.style.display = 'none'
    },
    hideBox: function (intros, index) {
      intros[index].hide = false
      event.target.style.display = 'none'
    },
    swipeleft: function () {
      const ulBox = document.getElementsByClassName('ulBox')
      const w = -(parseFloat(this.h) - 2.96)
      let left = parseFloat(ulBox[0].style.left)
      left = left < 0 ? left : 0
      if (left < 0 || left === 0) {
        left = left - 1.48
      }
      if (left < w) {
        left = w
      }
      ulBox[0].style.left = left + 'rem'
    },
    swiperight: function () {
      const ulBox = document.getElementsByClassName('ulBox')
      let left = parseFloat(ulBox[0].style.left)
      left = left > 0 ? left : 0
      if (left < 0) {
        left = left + 1.48
      }
      ulBox[0].style.left = left + 'rem'
    },
    left: function () {
      this.$router.push('/pay')
    },
    getCourseDetail () {
      const courseID = window.localStorage.getItem('SchedulesId')
      let e = this
      requestSchedulesDetail(courseID).then((res) => {
        let data = res.data.data
        e.trainer = data.Trainer.data
        e.store = data.Store.data
        e.course = data.Course.data
        e.weekTime = data.weekday_time
        e.weekday = data.weekday
        if (data.weekday === 1) {
          e.weekday = '周一'
        }
        if (data.weekday === 2) {
          e.weekday = '周二'
        }
        if (data.weekday === 3) {
          e.weekday = '周三'
        }
        if (data.weekday === 4) {
          e.weekday = '周四'
        }
        if (data.weekday === 5) {
          e.weekday = '周五'
        }
        if (data.weekday === 6) {
          e.weekday = '周六'
        }
        if (data.weekday === 7) {
          e.weekday = '周日'
        }
        const liL = e.store.images.length
        this.h = liL * 1.58 + 'rem'
      })
    }
  }
}
</script>

<style scoped lang="less">
  @subject:#e61b64;
  ._3_Zce {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.7);
    z-index: 20000;
    text-align: right;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }

  ._3_Zce img {
    width: 175px!important;
    height: 194px!important;
    z-index: 20001;
  }

  .div{
    width: 100%;
    height: auto;
    overflow: hidden;
    background: #212121;
    padding:0.14rem 0.14rem 0.08rem;
    border-radius: 0.05rem;
    margin-bottom:0.14rem;
    box-sizing: border-box;
  }
  .classDetail{
    .top{
      width: 100%;
      height: 1.5rem;
      img{
        width: 100%;
        height: 1.5rem;
        display: block;
      }
    }
    .center{
      padding:0.14rem 0.14rem 0 0.14rem;
      height: auto;
      overflow: hidden;
      margin:0 auto;
      .info,.dress,.intro{
        .div
      }
      .info{
        font-size:0.12rem;
        display: flex;
        justify-content: space-between;
        .font{
          width: 1.78rem;
          h2{
            font-size: 0.22rem;
            color: #fff;
            font-weight: 900;
            overflow: hidden;
            line-height: 0.27rem;
          }
          p{
            margin-top:0.08rem;
            font-weight: lighter;
          }
          .hide{
            display: -webkit-box;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
          }
          div{
            content: '';
            width: 10px;
            height: 10px;
            border-top: 1px solid #595757;
            border-right: 1px solid #595757;
            margin-top: 0.05rem;
            margin-bottom:0.05rem;
            -webkit-transform: rotate(135deg);
            -ms-transform: rotate(135deg);
            transform: rotate(135deg);
            display: -ms-flexbox;
            display: flex;
            display: -webkit-flex;
            margin-left: auto;
            margin-right: auto;
          }
        }
        .img{
          width: 0.76rem;
          height: 0.76rem;
          border-radius: 50%;
          overflow: hidden;
          img{
            width: 0.76rem;
            height: 0.76rem;
            display: block;
          }
        }
      }
      .dress{
        padding: 0;
        div{
          border-bottom:1px solid #2e2e2c;
          font-size:0.13rem;
          padding:0.14rem;
          line-height:0.2rem;
          p{
            padding-left:0.28rem;
            a{
              color: @subject;
            }
          }
        }
        .price{
          background: url(../../assets/images/price.png) no-repeat 0.14rem center;
          -webkit-background-size:0.15rem 0.14rem;
          background-size:0.15rem 0.14rem;
        }
        .time{
          background: url(../../assets/images/time.png) no-repeat 0.14rem center;
          -webkit-background-size:0.15rem 0.14rem;
          background-size:0.15rem 0.14rem;
        }
        .local{
          background: url(../../assets/images/location.png) no-repeat 0.19rem center;
          -webkit-background-size:0.11rem 0.15rem;
          background-size:0.11rem 0.15rem;
        }
      }
      .intro{
        padding:0;
        font-size:0.12rem;
        section{
          width: 100%;
          height: 0.38rem;
          line-height:0.38rem;
          font-size:0.17rem;
          color: #fff;
          background:#1c1c1c url(../../assets/images/list.png) no-repeat 0.14rem center;
          -webkit-background-size:0.12rem 0.15rem;
          background-size:0.12rem 0.15rem;
          padding-left:0.4rem;
          box-sizing: border-box;
        }
        .con{
          width: 100%;
          height: auto;
          overflow: hidden;
          padding:0.14rem;
          box-sizing: border-box;
          .class{
            margin-top: 0.04rem;
            padding-bottom: 0.12rem;
            display: flex;
            flex-wrap: wrap;
            border-bottom:1px solid #2e2e2c;
            span{
              margin-top: 0.08rem;
              margin-right: 0.08rem;
              padding: 0.04rem 0.08rem;
              border-radius: 0.2rem;
              color: #8c8989;
              font-size: 0.12rem;
              background-color: #0d0d0d;
            }
          }
          .img{
            width: 100%;
            height: 0.7rem;
            overflow: hidden;
            margin: 0.1rem auto 0;
            padding-bottom:0.1rem;
            position: relative;
            border-bottom:1px solid #2e2e2c;
            ul{
              width: auto;
              height: 0.7rem;
              position: absolute;
              left:0;
              top:0;
              transition: all .5s;
              li{
                width: 1.48rem;
                height: 0.7rem;
                float: left;
                margin-right:0.1rem;
                img{
                  width: 1.48rem;
                  height: 0.7rem;
                  display: block;
                }
              }
            }
          }
          .bottom{
            width: 100%;
            height: auto;
            margin-top:0.12rem;
            .box{
              p{
                padding: 0.05rem 0.14rem;
                margin-left:-0.14rem;
                span{
                  margin-left: -17px;
                  background-color: #0d0d0d;
                  font-size: 0.14rem;
                  border-top-right-radius: 0.12rem;
                  border-bottom-right-radius: 0.12rem;
                  padding: 0.05rem 0.14rem;
                  color: @subject;
                  z-index:10000;
                }
              }
              article{
                margin-top: 0.1rem;
                margin-bottom: 0.1rem;
              }
              .hide{
                display: -webkit-box;
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
              }
              div{
                content: '';
                width: 10px;
                height: 10px;
                border-top: 1px solid #595757;
                border-right: 1px solid #595757;
                margin-top: 0.05rem;
                margin-bottom: 0.05rem;
                -webkit-transform: rotate(135deg);
                transform: rotate(135deg);
                display: -ms-flexbox;
                display: -webkit-box;
                display: flex;
                display: -webkit-flex;
                margin-left: auto;
                margin-right: auto;
              }
            }
          }
        }
      }
      .tips{
        section{
          background: #1c1c1c url(../../assets/images/tip.png) no-repeat 0.14rem center;
          background-size: 0.12rem 0.15rem;
        }
      }
      .ye {
        margin-bottom:0.14rem;
        background-color: #262626;
        border-radius: 5px;
        overflow: hidden;
      }
      .iconBox {
        width: 0.35rem;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
      }
      .ye_tit {
        height: 0.38rem;
        background-color: #1c1c1c;
        display: -ms-flexbox;
        display: flex;
        display: -webkit-flex;
        font-size: 0.17rem;
        color: #fff;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
      }
      .ye_content {
        padding: 0.14rem;
        color: #bfbbbb;
        font-size: 0.13rem;
        font-weight: lighter;
        line-height: 0.2rem;
      }
      .ye_mid {
        height: 1px;
        background-color: #2e2e2c;
        display: block;
        content: "";
        margin-left: 1px;
        margin-right: 1px;
      }
      .step {
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
      }
      .detail {
        padding-bottom: 0.49rem;
        background: #333;
      }

    }
    .null{
      width: 100%;
      height: 0.49rem;
    }
    .finish{
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      width: 100%;
      height: 0.49rem;
      line-height:0.49rem;
      text-align: center;
      position: fixed;
      left:0;
      bottom:0;
      z-index:2;
      font-size:0.17rem;
      .left{
        -webkit-flex: 7;
        -ms-flex: 7;
        flex: 7;
        background: linear-gradient(to bottom, #df1b6b 0%, #a61ba3 100%);
        color: pink;
      }
      .right{
        -webkit-flex: 3;
        -ms-flex: 3;
        flex: 3;
        background: #0d0d0d;
      }
    }
  }
</style>
